<template>
    <view class="shenzhen">
        <view class="header">

            <view class="custom_header" style="height: {{navH}}px">
                <view>
                    <view id="icon">

                        <u-icon name="arrow-left" color="#2979ff" size="18" @click="icon"></u-icon>
                    </view>
                </view>
                <view>竞争对手</view>
                <view style="color: #09f; font-size: 20px; margin-right: 10px;" @click="add">+</view>
            </view>
            <view style="display: flex;padding: 20px 60px; justify-content: space-between;">
                <!-- 1111 -->
                <qiaopaixu></qiaopaixu>
                <qiaoshaixuan></qiaoshaixuan>
            </view>
        </view>
        <view class="one">
            <ul class="one_b">
                <li class="one_li" v-for="(item, index)  in    list   " :key="index">
                    <view class="one_p">
                        <p @click="gongsi">{{ item.name }}</p>
                        <p>{{ item.data }}</p>
                        <p>{{ item.a }} <span style="color: #666;">{{ item.b }}<span>{{ item.c }}</span> </span></p>
                    </view>
                    <view style="text-align: center; position: relative;" class="vv">
                        <p>
                            <span
                                style="display: block; position: absolute; top: 12px; right: 80px; width: 8px; height: 8px; border-radius: 50%;"></span>

                            <span style="font-size: 14px;">{{ item.d }}</span>
                        </p>
                        <p>
                            <img src="/static/img/1.png" class="one_img" @click="liLi">
                        </p>
                        <p>李小明</p>
                    </view>

                </li>
            </ul>
            <view style="height: 80px; margin-top: 30px;">

                <u-loading-icon text="加载中"> </u-loading-icon>
            </view>
        </view>

        <view class="footer">





        </view>
    </view>
</template>

<script setup lang="ts">

import qiaoshaixuan from '@/pages/qiao-crm/tan/qiaoshaixuan.vue'
import qiaopaixu from '@/pages/qiao-crm/tan/qiaopaixu.vue'
import { ref } from "vue";
const list = ref([
    { id: 0, name: '竞争对手公司名称', data: "所在地区:广东省深圳市", a: "人员规模:51人-200人", b: "", c: "", d: "", img: '/static/img/1.png' },
    { id: 1, name: '竞争对手公司名称', data: "所在地区:广东省深圳市", a: "人员规模:51人-200人", b: "", c: "", d: "", img: '/static/img/1.png' },
    { id: 2, name: '竞争对手公司名称', data: "所在地区:广东省深圳市", a: "人员规模:51人-200人", b: "", c: "", d: "", img: '/static/img/1.png' },
    { id: 3, name: '竞争对手公司名称', data: "所在地区:广东省深圳市", a: "人员规模:51人-200人", b: "", c: "", d: "", img: '/static/img/1.png' },
    { id: 4, name: '竞争对手公司名称', data: "所在地区:广东省深圳市", a: "人员规模:51人-200人", b: "", c: "", d: "", img: '/static/img/1.png' },
    { id: 5, name: '竞争对手公司名称', data: "所在地区:广东省深圳市", a: "人员规模:51人-200人", b: "", c: "", d: "", img: '/static/img/1.png' },
 

])

const icon = () => {
    uni.navigateBack({
        delta: 1
    })
}
const liLi = () => {
    uni.navigateTo({
        url: '/pages/qiao-crm/qiao-sousuo/qiaotouxiang'
    })
}
const gongsi = () => {
    uni.navigateTo({
        url: '/pages/qiao-crm/qiao-sousuo/qiaogongsi'
    })
}
const add = () => {
    uni.navigateTo({
        url: '/pages/qiao-crm/qiao-sousuo/qiaoshezhi/qiaochuangjian'
    })
}
</script>

<style scoped lang="scss">
.active {
    color: blue;
}

.vv {
    width: 100px;
}

.one_img {
    width: 30px;
    height: 30px;
    margin-top: 30px;
}

.one_p:nth-child(1) {
    margin-left: 8px;
    margin-top: 8px;
}

.one_b {
    width: 350px;
    overflow: hidden;
    background-color: #fff;
    border-radius: 10px;
    display: flex;
    flex-wrap: wrap;
}

.one_a {
    display: flex;
}

.one_li {
    width: 340px;
    height: 110px;
    display: flex;
    justify-content: space-between;
    border-radius: 10px;
    box-shadow: 0 0 10px #ccc;
    margin-top: 15px;
    margin-left: 10px;
    line-height: 30px;
    position: relative;
}

.box1 {
    position: absolute;
    top: 110px;
    left: 10px;
    display: flex;
    justify-content: space-between;
    width: 320px;
}

.img {
    width: 50px;
    height: 50px;
}

.header {
    height: 80px;
    background-color: #fff;
}

.one {
    height: calc(100vh - 80px - 50px);
    background-color: rgb(249, 249, 249);
    overflow: hidden;
    overflow-y: scroll;
}

.footer {
    height: 50px;
}

.custom_header {
    display: flex;
    justify-content: space-between;
    width: 100vw;
    font-weight: bold;
    z-index: 99;
    margin-top: 40px;
    background-color: #fff;
}

.search {
    display: flex;
    width: 375px;
    justify-content: space-between;
    padding-top: 10px;
    align-items: center;
    padding: 10px 10px;
    position: relative;

    .inp {
        width: 250px;
        height: 60rpx;
        border: 1rpx solid #ccc;
        border-radius: 30rpx;
        padding-left: 30px;
        margin-left: 30px;

    }
}

.search_img {
    width: 20px;
    height: 20px;
    position: absolute;
    left: 100rpx;
    top: 35rpx;
}

.shenzhen {
    width: 100vw;
    height: 100vh;
    background-color: #fff;
}
</style>
